<template>
    <div class="head">
         <div class="headerBox">
      <div class="header border-b">
        <div class="headerText textover ft18">VIP俱乐部</div>
        <div class="left-back" @click="clickHandler()">
          
        </div>
        <div class="right-more"></div>
      </div>
    </div>
    <div class="card rela">
        <div class="rela" >
            <img src="../assets/img/card.png" class="cardimg db">
            <div class="abs con ftc"  >
                <a>
                    <img src="../assets/img/headshot.jpg" class="myhead">
                </a>
                <p class="mt10">
                    <span class="ft16 cfff">主人_v75V95n9cO</span>
                    <img src="../assets/img/v0.png" class="vipnumber">
                </p>
                <p class="cf8e7d1 ft10 mt5">完成一次购物立刻升级到V1</p>
                <div class="usernum cfff flex flex-pc">
                    <div class="mr25">
                        <p class="ft20 bold gradient">V0</p>
                        <p class="ft12 cf3e0b1">等级</p>
                    </div>
                    <a class="ml20 mr20">
                        <p class="ft20 bold gradient1">0</p>
                        <p class="ft12 cf3e0b1">爱宠值</p>
                    </a>
                    <a class="ml25">
                        <p class="ft20 bold gradient1">0</p>
                        <p class="ft12 cf3e0b1">E宠币</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="ftc">
        <div class="title">
            <p>
                <img src="../assets/img/left-.png">
                <span class="ft16 cd7d5c1 ml10 mr10 gradient2">我的特权</span>
                <img src="../assets/img/right-.png">
            </p>
        </div>
        <ul class="column overflow cabac9c ft12" v-for="(item,index) in userList" :key="index">
            <li>
                <img :src="item.privilege.img">
                <p>{{item.name}}</p>
            </li>
        </ul>
        <ul class="column overflow cabac9c ft12 hide">
            <li>
                <img src="">
                <p></p>
            </li>
        </ul>
    </div>
    <div class="members pl15 pr15">
        <div class="ftc bgfff members_con pt15 pb15 rela">
            <p class="ft14 fi ce9292e bold gradient4">"每月12日 E宠会员日"</p>
            <p class="ft12 c282828">-货好价优 囤货正当时-</p>
            <img src="../assets/img/vipimg.png" class="img abs">
            <span class="abs ft10 cfff">+订阅</span>
        </div>
    </div>
    <div class="emoney pl15 pr15">
        <div class="title ftc">
            <p>
                <img src="../assets/img/left-.png">
                <span class="ft16 cd7d5c1 ml10 mr10 gradient2">赚宠币</span>
                <img src="../assets/img/right-.png">
            </p>
        </div>
        <div class="emoney_con">
            <div class="flex flex-ac pt10 pb10">
                <img src="../assets/img/laji.png" class="mr10">
                <div class="it1">
                    <p>
                        <span class="ft15 c393939">购物</span>
                    </p>
                    <p class="ft12 c999"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="emoney pl15 pr15"></div>
    
    </div>
   
   
    
    
</template>
<script>
export default{
     methods:{
        clickHandler(){
            this.$router.back(-1);
        },
},
data() {
    return {
      userList: [],
    };
  },
async mounted() {
    
    let result = await this.$http.post({
      url: "/vip/Main.html",
      data: {
        do: 'index',
        version: '517',
        system: 'wap',
        isWeb: 1,
        distinct_id:
          '96513866273889',
        debug_param:'',
        sessionToken: '',
        wx_site: ''
      }
    })
    this.userList = result.list;
    console.log(result.list);
    
    
  },
}
</script>
<style lang="stylus">
.head
  background-color #f5f5f5
  height 100%
  overflow auto
  background-color rgb(40,40,40)
.header {
  width: 100%;
  height: 0.5rem;
  background: #fff;
  line-height: 0.5rem;
  color: #333;
  position: relative;
  border-bottom: 0.01rem solid #f3f3f3;
}

.headerText {
  text-align: center;
  margin: 0 0.65rem;
}

.textover {
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  text-overflow: ellipsis;
}

.ft18 {
  font-size: 0.18rem;
}

.left-back {
  width: 0.35rem;
  height: 0.35rem;
  background: url('../assets/img/topIco.bc556dcf.png') 0 0 no-repeat;
  background-size: 0.35rem auto;
  position: absolute;
  left: 0.05rem;
  top: 0.07rem;
  background-position: 0 0;
}

.right-more {
  width: 0.35rem;
  height: 0.35rem;
  background: url('../assets/img/topIco.bc556dcf.png') 0 0 no-repeat;
  background-size: 0.35rem auto;
  position: absolute;
  right: 0.05rem;
  top: 0.07rem;
  background-position: 0 -0.7rem;
}
.card {
    background: url('../assets/img/bc.jpg') no-repeat;
    background-size: 100% 100%;
    padding: 0.64rem 0 0.3rem;
}
.rela{
    position: relative;
}
.db {
    display: block;
}
img {
    vertical-align: middle;
}
.card .cardimg {
    width: 90%;
    margin: 0 auto;
}
.con {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.abs {
    position: absolute;
}
.ftc {
    text-align: center;
}
.myhead {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 50%;
    margin-top: -0.2rem;
}
.mt10 {
    margin-top: 0.1rem;
}
.afff, .cfff {
    color: #fff;
}
.ft16 {
    font-size: 0.16rem;
}
.vipnumber{
    display: inline-block;
    width: 0.3rem;
    height: 0.15rem;
    margin-bottom: 0.02rem;
}
.cf8e7d1 {
    color: #f8e7d1;
}
.ft10 {
    -webkit-transform-origin-x: inherit !important;
    font-size: 0.12rem;
    
}
.mt5 {
    margin-top: 0.05rem;
}
.usernum{
    position: absolute;
    width: 90%;
   
    left: 5%;
    bottom: 10%;
}
.flex-pc {
    -webkit-box-pack: center;
    justify-content: center;
}
.flex {
    display: flex;
}
.mr25{
    margin-right: 0.25rem;
}
.gradient1 {
   
    background: linear-gradient(to bottom, #fcfff6, #ffe9c5);
    -webkit-background-clip: text;
    color: transparent;
}
.gradient2{
    background: linear-gradient(to right, #d7d5c1, #bea092);
    color: transparent;
    -webkit-background-clip: text;
}

.ft20 {
    font-size: 0.2rem;
}
.bold {
    font-weight: 700;
}
.ft12 {
    font-size: 0.12rem;
}
.ml20 {
    margin-left: 0.2rem;
}
.mr20 {
    margin-right: 0.2rem;
}
.ml25 {
    margin-left: 0.25rem;
}
.ftc {
    text-align: center;
}

.ml10 {
    margin-left: 0.1rem;
}
.mr10 {
    margin-right: 0.1rem;
}
.cf3e0b1 {
    color: #f3e0b1;
}
.pl15 {
    padding-left: 0.15rem;
}
.pr15 {
    padding-right: 0.15rem;
}
.bgfff {
    background: #fff;
}
.members_con {
    border-radius: 0.15rem;
    margin-bottom: 0.25rem;
}
.pb15 {
    padding-bottom: 0.15rem;
}
.pt15 {
    padding-top: 0.15rem;
}
.gradient4{
     
    background: linear-gradient(to bottom, #f76652, #e8242b);
    -webkit-background-clip: text;
    color: transparent;
}

.fi {
    font-style: italic;
}
.members .members_con p {
    margin-left: 15%;
}
.bgfff {
    background: #fff;
}
.ft14 {
    font-size: 0.14rem;
}
.members img{
    width: 37%;
    max-width: 1.25rem;
    bottom: 0;
    left: 0.05rem;
}

.ft10 {
    -webkit-transform-origin-x: inherit !important;
}
.members .members_con span {
    display: inline-block;
    background: #e8c279;
    border-radius: 0.2rem;
    width: 0.7rem;
    padding: 0.05rem 0;
    right: 1%;
    top: 30%;
}
.emoney_con {
    background: url('../assets/img/bc1.png') no-repeat;
    background-size: 100% 100%;
    padding: 15% 15%;
    margin-bottom: 0.25rem;
}
.pb10 {
    padding-bottom: 0.1rem;
    padding-top: 0.1rem;
}
.emoney_con img {
    width: 0.425rem;
    height: 0.425rem;
}
.mr10 {
    margin-right: 0.1rem;
}
</style>